import React from 'react';
import moment from 'moment';
import { connect } from 'react-redux';
import { Picker } from 'antd-mobile';
import { ListView } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';

@connect(({ refuel }) => {
  return {
    hasMore: refuel.getIn(['refuelList', 'hasMore']),
    list: refuel.getIn(['refuelList', 'list']),
    page: refuel.getIn(['refuelList', 'page']),
  };
})
class RefuelList extends BaseComponent {
  state = {
    showHeader: true,
    date: null,
  }

  dateList = [
    [...Array(5).keys()].map((index) => {
      const year = moment().subtract(index, 'year').format('YYYY');
      return { label: year, value: year };
    }),
    [...Array(12).keys()].map((index) => {
      const month = `${index + 1}`;
      return { label: month, value: month };
    }),
  ]

  componentDidMount() {
    this.requestData(1);
  }

  dateChanged = (value) => {
    console.log(value);
    this.setState({ date: value });
    setTimeout(() => {
      this.requestData(1);
    }, 300);
  }

  requestData = (page) => {
    const { date } = this.state;
    this.props.dispatch({
      type: 'refuel/fetchRefuelList',
      payload: {
        targetPage: page || (this.props.page + 1),
        pageSize: 10,
        beginTime: date ? `${date[0]}-${date[1]}-1 00:00:00` : null,
      },
    });
  }

  goDetail = (detail) => {
    this.props.history.push({
      pathname: 'refuelDetail',
      state: { detail },
    });
  }

  render() {
    const { showHeader, date } = this.state;
    console.log(this.dateList);
    const { hasMore, list } = this.props;
    let header;
    if (showHeader) {
      header = (
        <Picker
          data={this.dateList}
          cols={2}
          value={date}
          cascade={false}
          // onPickerChange={this.expireAtChanged}
          onOk={this.dateChanged}
        >
          <div className="header">
            {date ? `${date[0]}年${date[1]}月` : '全部时间'}
            <i className="iconfont icon-trangle" />
          </div>
        </Picker>
      );
    }

    const groups = list.map((group, index) => {
      const cells = group.get('list').map((refuel, subIndex) => {
        return (
          <div className="refuel-cell" key={subIndex} onClick={() => this.goDetail(refuel)}>
            <div className="cell-header">
              <div>{refuel.get('payTime')}</div>
              <i className="iconfont icon-arrow" />
            </div>
            <div className="cell-row">
              <div className="cell-title">订单编号</div>
              <div className="cell-text">{refuel.get('orderNo')}</div>
            </div>
            <div className="cell-row">
              <div className="cell-title">支付金额</div>
              <div className="cell-text">&#65509;{refuel.get('payAmountYuan')}</div>
            </div>
            <div className="cell-row">
              <div className="cell-title">加油油站</div>
              <div className="cell-text">{refuel.get('stationName')}</div>
            </div>
          </div>
        );
      });
      return (
        <div className="cell-group" key={index}>
          <div className="group-header">{group.get('title')}</div>
          <div className="group-body">
            {cells}
          </div>
        </div>
      );
    });
    return (
      <div className="refuel-list-base">
        {header}
        <ListView
          className="list"
          loadMore={this.requestData}
          hasMore={hasMore}
          empty={this.renderEmpty('没有加油记录')}
          renderFooter={this.renderFooter}
        >
          {groups}
        </ListView>
      </div>
    );
  }
}

export default RefuelList;
